<template>
  <div class="left-bar-list">
    <template v-for="item in functionIconList">
      <a-popover
        v-if="item.tooltip === '框选/套索'"
        :key="item.id"
        placement="rightTop"
        :overlay-style="{ width: '70px' }"
      >
        <div class="function-btn-icon">
          <a-icon-font
            :type="
              selectedTool === '框选' || selectedTool === '套索'
                ? `${item.icon}-copy`
                : item.icon
            "
          />
        </div>
        <template slot="content">
          <div class="dropdown-menu">
            <a-tooltip placement="right">
              <template slot="title">
                <span>框选</span>
              </template>
              <div class="function-btn-icon" @click="selectTool('框选')">
                <a-icon-font
                  :type="
                    selectedTool === '框选' ? 'icontaosuo1-copy' : 'icontaosuo1'
                  "
                />
              </div>
            </a-tooltip>
            <a-tooltip placement="right">
              <template slot="title">
                <span>套索</span>
              </template>
              <div class="function-btn-icon" @click="selectTool('套索')">
                <a-icon-font
                  :type="
                    selectedTool === '套索' ? 'icontaosuo2-copy' : 'icontaosuo2'
                  "
                />
              </div>
            </a-tooltip>
          </div>
        </template>
      </a-popover>
      <a-popover
        v-else-if="item.tooltip === '搜索'"
        :key="item.id"
        v-model="searchPanelVisible"
        placement="rightTop"
        trigger="click"
        :overlay-style="{ width: '220px' }"
      >
        <a-tooltip placement="right">
          <template slot="title">
            <span>搜索</span>
          </template>
          <div class="function-btn-icon" @click="selectTool(item.tooltip)">
            <a-icon-font
              :type="
                selectedTool === item.tooltip ? `${item.icon}-copy` : item.icon
              "
            />
          </div>
        </a-tooltip>
        <div slot="content" class="search-panel-container">
          <span>搜索节点类型</span>
          <div class="search-area">
            <a-checkbox :checked="checkAll" @change="onCheckAllChange">
              全选
            </a-checkbox>
            <a-checkbox-group v-model="checkedList" :options="nodeCategories" />
          </div>
          <span>搜索内容</span>
          <a-input
            v-model="searchContent"
            class="search-input"
            placeholder="搜索内容"
            :allow-clear="true"
          />
          <div class="search-button-container">
            <a-button size="small" @click="cancelSearch">取消</a-button>
            <a-button type="primary" size="small" @click="search"
              >搜索
            </a-button>
          </div>
        </div>
      </a-popover>
      <a-tooltip
        v-else-if="item.type === 'icon'"
        :key="item.id"
        placement="right"
      >
        <template slot="title">
          <span>{{ item.tooltip }}</span>
        </template>
        <div class="function-btn-icon" @click="selectTool(item.tooltip)">
          <a-icon-font
            :type="
              selectedTool === item.tooltip ? `${item.icon}-copy` : item.icon
            "
          />
        </div>
      </a-tooltip>
      <span
        v-else-if="item.type === 'divider'"
        :key="item.id"
        class="horizontal-divider"
      ></span>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import GraphAnalysisStore from '@/store/modules/graphanalysis'

@Component({
  components: {},
})
export default class GraphAnalysisLeftBar extends Vue {
  private currentId: any = 3

  private functionIconList: any = [
    { id: 1, type: 'icon', icon: 'iconsousuobeifen3', tooltip: '搜索' },
    { id: 2, type: 'divider' },
    { id: 3, type: 'icon', icon: 'iconjiantou', tooltip: '选择' },
    // {id: 4, type: 'icon', icon: 'icontuodongbeifen', tooltip: '拖动'},
    { id: 5, type: 'icon', icon: 'iconkuangxuanbeifen', tooltip: '框选/套索' },
    { id: 6, type: 'divider' },
    { id: 7, type: 'icon', icon: 'iconhuabi', tooltip: '着色' },
    { id: 8, type: 'icon', icon: 'icongeshishuabeifen', tooltip: '格式刷' },
    { id: 9, type: 'icon', icon: 'iconrequzhuosebeifen', tooltip: '热区' },
    { id: 10, type: 'icon', icon: 'iconquse', tooltip: '重设颜色' },
    { id: 11, type: 'divider' },
    {
      id: 12,
      type: 'icon',
      icon: 'iconjiedianbiaoqianbeifen',
      tooltip: '标签设置',
    },
    { id: 13, type: 'icon', icon: 'iconbianshezhi', tooltip: '边设置' },
    { id: 14, type: 'divider' },
    { id: 15, type: 'icon', icon: 'iconzuiduanlujing', tooltip: '最短路径' },
    { id: 16, type: 'divider' },
    { id: 17, type: 'icon', icon: 'iconhuidaohuabanbeifen3', tooltip: '居中' },
  ]

  private selectedTool = ''

  public selectTool(toolName: string) {
    GraphAnalysisStore.setSelectedTool(toolName)
    if (toolName !== '重设颜色') {
      GraphAnalysisStore.setNeedSave(true)
    }
    this.selectedTool = toolName
    if (toolName === '搜索') {
      this.checkedList = this.nodeCategories
    }
  }

  public get storeSelectedTool() {
    return GraphAnalysisStore.selectedTool
  }

  @Watch('storeSelectedTool')
  storeSelectedToolChanged(value: string) {
    this.selectedTool = value
  }

  private searchPanelVisible: boolean = false
  private checkAll: boolean = true
  private checkedList: Array<any> = []
  private searchContent: string = ''

  public get nodeCategories() {
    return GraphAnalysisStore.categories.map((c: any) => c.id)
  }

  public onCheckAllChange(event: any) {
    this.checkedList = event.target.checked ? this.nodeCategories : []
    this.checkAll = event.target.checked
  }

  public cancelSearch() {
    this.searchPanelVisible = false
  }

  public async search() {
    if (this.nodeCategories.length === 0) {
      this.$message.warning('请导入图数据')
      return
    }
    if (this.checkedList.length === 0) {
      this.$message.warning('请选择搜索范围')
      return
    }
    if (this.searchContent === '') {
      this.$message.warning('请输入搜索内容')
      return
    }

    await GraphAnalysisStore.searchNode({
      predicate: this.searchContent,
      categoryIds: this.checkedList,
    })

    this.searchPanelVisible = false
  }

  @Watch('checkedList')
  checkedListChanged(list: Array<any>) {
    if (list.length === this.nodeCategories.length) {
      this.checkAll = true
    } else {
      this.checkAll = false
    }
  }
}
</script>

<style scoped lang="less">
/* 功能按钮 */
.left-bar-list {
  align-items: center;
  background-color: #fff;
  border-right: 1px solid #e9e9e9;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  padding: 12px 0;
  width: 38px;

  .horizontal-divider {
    border-top: 1px solid #d8d8d8;
    height: 1px;
    margin: 6px 0;
    width: 20px;
  }
}

.function-btn-icon {
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  margin: 6px 0;
  padding: 4px;
  position: relative;

  &:hover {
    background-color: #f1f1f1;
    color: #6973ff;
  }
}

.dropdown-menu {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 65px;
  justify-content: flex-start;
}

.search-panel-container {
  align-items: flex-start;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 180px;

  .search-area {
    align-items: flex-start;
    background: #eff0f7;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  span {
    margin-bottom: 5px;
    margin-top: 10px;
  }

  .search-input {
    height: 30px;
    width: 100%;
  }

  .search-button-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    padding-left: 50px;
    width: 100%;
  }
}
</style>
